<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1640 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#FFF" d="M2.461 0h1638.4v1024H2.461z"/><path fill="#FCB315" d="M0 872.836h1640.861v151.113H0z"/><path fill="#0D357F" d="M0 0h1640.861v151.113H0zm807.765 304.739-86.094 415.343H617.528l86.094-415.343zm438.059 268.178 54.815-155.984 31.535 155.984zm116.245 147.165h96.246l-84.094-415.343h-88.811a47.38 47.38 0 0 0-44.355 30.458l-156.24 384.885h109.424l21.69-62.045h133.32zM1090.3 584.454c.462-109.63-146.857-115.68-145.831-164.65.307-14.87 14.05-30.766 44.149-34.817a191.16 191.16 0 0 1 102.554 18.614l18.254-88.094A273.152 273.152 0 0 0 1012 297.15c-102.913 0-175.367 56.404-175.93 137.268-.667 59.789 51.738 93.119 91.118 112.81 40.612 20.51 54.2 33.432 53.995 51.584-.257 27.843-32.407 40.2-62.25 40.662a212.338 212.338 0 0 1-106.964-26.253l-18.921 91.067a307.661 307.661 0 0 0 115.732 22.05c109.579.307 181.161-55.277 181.469-141.832zM659.062 304.687l-168.7 415.343H380.32l-83.017-331.505a45.534 45.534 0 0 0-24.716-36.509 426.47 426.47 0 0 0-102.554-35.33l2.462-12.05h177.161a49.02 49.02 0 0 1 48.047 42.304l43.842 240.386 108.296-282.69z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconVisa1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
